<template>
	<view class="item" :style="{'justifyContent':(isUser ? 'flex-end' : 'flex-start')}">
		<image src="/static/robot.png" class="header" v-if="!isUser"></image>
		<view class="content" :style="{'backgroundColor':(isUser ? '#cbb99b' : '#cac7f1'),'color':(isUser ? '#fff' : '#777'),'borderRadius':(isUser ? '30rpx 0rpx 30rpx 30rpx' : '0 30rpx 30rpx 30rpx')}">
			{{msg}}
		</view>
		<image src="/static/user.png" class="header" v-if="isUser"></image>
	</view>
</template>

<script>
	export default {
		name:"chatItem",
		
		data() {
			return {
			};
		},
		props:{
			isUser:Boolean,
			msg:String
		}
	}
</script>

<style lang="scss">
	.item{
		display: flex;
		align-items: flex-start;
		
		width: 100vw;
		
		.header{
			width: 100rpx;
			height: 100rpx;
			margin: 10rpx 15rpx;
			
			border-radius: 50rpx;
		}
		
		.content{
			margin: 0 25rpx;
			margin-top: 30rpx;
			padding: 20rpx;
			max-width: 55%;
			height: 100%;
			// border-radius: 0 30rpx 30rpx 30rpx;
			line-height: 50rpx;
		}
	}
</style>